<template>
	<view class="address-page">
		<navgatsVue :navigationMsg="navigationMsg"></navgatsVue>
		<view class="main">
			<view class="username">
				<view class="title">
					收货人
				</view>
				<view class="msg">
					<u--input style="height: 100%;" placeholder="请输入收货人姓名" border="none" v-model="addressMsg.username"
						fontSize="30rpx"></u--input>
				</view>
			</view>
			<view class="tel">
				<view class="title">
					手机号码
				</view>
				<view class="msg">
					<u--input style="height: 100%;" placeholder="请输入收货人电话" border="none" v-model="addressMsg.tel"
						fontSize="30rpx"></u--input>
				</view>
			</view>
			<view class="area" @click="changeSheng">
				<view class="title">
					所在省份
				</view>
				<view class="msg" @click="show = true">
					{{shenglabel}}
				</view>
			</view>
			<view class="area" v-show="shiIf">
				<view class="title">
					所在市区
				</view>
				<view class="msg" @click="changeShi">
					{{shilabel}}
				</view>
			</view>
			<view class="area" v-show="quIf">
				<view class="title">
					所在区县
				</view>
				<view class="msg" @click="changeQU">
					{{qulabel}}
				</view>
			</view>
			<view class="address">
				<view class="title">
					详细地址
				</view>
				<view class="msg">
					<u--textarea border="bottom" v-model="addressMsg.address" placeholder="请输入内容"></u--textarea>
				</view>
			</view>
			<view class="zip">
				<view class="title">
					邮编
				</view>
				<view class="msg">
					<u--input style="height: 100%;" placeholder="可选填" border="none" v-model="addressMsg.zip"
						fontSize="30rpx"></u--input>
				</view>
			</view>
			<view class="default">
				<view class="title">
					默认地址
				</view>
				<view class="msg">
					<u-switch activeColor="#f9ae3d" v-model="defaultValue" @change="detaultChange"></u-switch>
				</view>
			</view>
		</view>
		<u-picker @close="showsheng=false" @cancel="showsheng=false" :show="showsheng" @confirm="confirmsheng"
			:columns="Areacolumn" :closeOnClickOverlay="true"></u-picker>
		<u-picker @close="showshi=false" @cancel="bayshi" :show="showshi" @confirm="confirmshi" :columns="Areacolumn"
			:closeOnClickOverlay="true"></u-picker>
		<u-picker v-show="quIf" @close="showqu=false" @cancel="bayqu" :show="showqu" @confirm="confirmqu"
			:columns="Areacolumn" :closeOnClickOverlay="true"></u-picker>
		<view class="add_address" @click="addAddress">
			确认
		</view>
	</view>
</template>

<script>
	import {
		get_area,
		add_address
	} from '../../../api/api';
	import navgatsVue from '../../../common/navgats/navgats.vue';
	export default {
		data() {
			return {
				navigationMsg: {
					bgColor: "#f6f6f6",
					title: "新增地址"
				},
				findValueData: [],
				//省市区信息
				shenglabel: "",
				shengValue: "",
				shilabel: "",
				shiValue: "",
				qulabel: "",
				quValue: "",
				//市区显隐
				shiIf: false,
				quIf: false,
				// 省市区选择器
				showsheng: false,
				showshi: false,
				showqu: false,
				// 选择地址数据
				Areacolumn: [],
				//新增地址传参
				addressMsg: {
					username: "",
					tel: "",
					zip: "",
					cityId: "",
					address: "",
				},
				//默认地址
				defaultValue: false
			}
		},
		components: {
			navgatsVue
		},
		mounted() {

		},
		methods: {
			//获取省市区
			async getArea(province, citys) {
				let data = {
					province: province,
					city: citys
				}
				let res = await get_area(data)
				if (res.data.code == 1) {
					this.findValueData = res.data.data
					this.Areacolumn = [
						res.data.data.map(item => item.label)
					];
					console.log(this.Areacolumn);
				}
			},
			//选择省
			changeSheng() {
				this.shiValue = ""
				this.shilabel = ""
				this.quValue = ""
				this.qulabel = ""
				this.getArea("", "")
				this.showsheng = true
			},
			//省确定
			confirmsheng(item) {
				let valuesheng = this.findValueData[item.indexs[0]];
				this.shengValue = valuesheng.value;
				this.shenglabel = valuesheng.label
				this.shiIf = true
				this.showsheng = false
			},
			//选择市
			changeShi() {
				this.quValue = ""
				this.qulabel = ""
				this.getArea(this.shengValue, "")
				this.showshi = true
			},
			//市确定
			confirmshi(item) {
				let valueshi = this.findValueData[item.indexs[0]]
				this.shiValue = valueshi.value;
				this.shilabel = valueshi.label
				this.quIf = true
				this.showshi = false
			},
			//选择区
			changeQU() {
				this.getArea(this.shengValue, this.shiValue)
				this.showqu = true
			},
			//区确定
			confirmqu(item) {
				let valuesqu = this.findValueData[item.indexs[0]]
				this.quValue = valuesqu.value;
				this.qulabel = valuesqu.label
				this.showqu = false
			},
			//点击确定
			addAddress() {
				let data = {
					name: this.addressMsg.username,
					phone: this.addressMsg.tel,
					address: this.addressMsg.address,
					zip: this.addressMsg.zip,
					default_switch: this.defaultValue ? "1" : "0",
					city: `${this.shengValue},${this.shiValue},${this.quValue}`
				}
				console.log(data);
				this.api_add_address(data)
			},
			//默认地址
			detaultChange(item) {
				console.log(item, this.defaultValue);
			},
			//新增地址
			async api_add_address(data) {
				let res = await add_address(data)
				if (res.data.code == 1) {
					uni.showToast({
						title: "添加成功",
						icon: "none",
						duration: 1000
					})
					setTimeout(() => {
						let canNavBack = getCurrentPages()
						if (canNavBack && canNavBack.length > 1) {
							uni.navigateBack()
						} else {
							history.back();
						}
					}, 1000)
				}
				if (res.data.code == 0) {
					uni.showToast({
						title: res.data.msg,
						icon: "none",
						duration: 1000
					})
				}
				console.log(res);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address-page {
		width: 100vw;
		height: 100vh;
		position: relative;

		.main {
			width: 100%;
			height: calc(100% - 320rpx);
			display: flex;
			flex-direction: column;
			align-items: center;

			.username,
			.tel,
			.area,
			.zip,
			.address,
			.default {
				width: 90%;
				height: 100rpx;
				display: flex;
				margin-top: 30rpx;
				position: relative;
				display: flex;
				justify-content: space-between;

				.title {
					width: 150rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 34rpx;
				}

				.msg {
					width: calc(100% - 200rpx);
					height: 100rpx;
					border-bottom: 1px solid #ccc;
				}
			}

			.area {
				.msg {
					line-height: 100rpx;
					font-size: 30rpx;
				}
			}

			.address {
				height: 150rpx;
			}

			.default {
				.msg {
					border: none;
					display: flex;
					align-items: center;
				}
			}
		}

		.addBox {
			width: 100vw;
			height: 500rpx;
		}

		.add_address {
			width: 90%;
			height: 100rpx;
			position: absolute;
			left: 5%;
			bottom: 20rpx;
			text-align: center;
			line-height: 100rpx;
			color: #fff;
			border-radius: 50rpx;
			background-color: #FCD748;
			font-size: 32rpx;
		}
	}
</style>